<script>
export default {
  data() {
    return {
      keyword: "",
      list: [],
      show: false,
      // 关闭中
      closing: false,
      listFilter: [],
      codeOfSelected: ""
    }
  },
  created() {
    this.codeOfSelected = this.$i18n.getLanguageCode();
    this.getAll();
  },
  methods: {
    filter() {
      this.listFilter = [];
      for (let i = 0; i < this.list.length; i++) {
        let item = this.list[i];
        if (item.name.indexOf(this.keyword) !== -1 || item.code.indexOf(this.keyword) !== -1) {
          this.listFilter.push(item);
        }
      }
    },
    getAll() {
      this.$kt.request.send({
        uri: "/system-dict-web/language/getBySupport",
        stateSuccess: (res) => {
          this.list = res.data;
          this.filter();
        }
      });
    },
    open() {
      this.show = true;
    },
    close() {
      // this.show = false;
      this.closing = true;
      setTimeout(() => {
        this.show = false;
        this.closing = false;
      }, 500);
    },
    select(code) {
      this.codeOfSelected = code;
      this.$i18n.setLanguageCode(code);
      this.$kt.storage.remove("intoTime");
      this.$kt.storage.remove("DataChange:clientInit");
      // 发起事件，告知国际化
      this.$kt.event.emit("i18n:change", code);
      // 刷新页面
      location.reload();
      // this.close();
    }
  }
}
</script>

<template>
  <div v-if="show">
    <div
        @click="close"
        class="back"
      :class="{
        'back-closing': closing
      }"
    ></div>
    <div class="card"
    :class="{
      'card-closing': closing
    }"
    >
      <div style="height: 10px"></div>
      <div class="title">{{$i18n.enToGlobal("Language selection")}}</div>
      <div style="height: 5px"></div>
      <div class="input-box">
        <input
            v-model="keyword"
            :placeholder="$i18n.enToGlobal('Please enter your search content')"
            clearable
            class="input"
            @clear="filter"
            @input="filter"
            @keyup.enter.native="filter"></input>
      </div>
      <div class="box-box">
        <div class="box">

          <el-row gutter="10">
            <el-col
                :span="12"
                v-for="item in listFilter">
              <div
                  :class="{
                    'box-card': true,
                    'box-card-no-selected': item.code !== codeOfSelected,
                    'box-card-selected': item.code === codeOfSelected
                  }"
                  @click="select(item.code)"
              >
                <div class="box-title">{{ item.name }}</div>
                <div style="height: 10px"></div>
                <div class="box-code">{{ item.code }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="height: 50px"></div>
      </div>
    </div>
  </div>

</template>

<style scoped lang="scss">
.card {
  position: fixed;
  right: 0;
  top: 0;
  width: 450px;
  height: 100vh;
  background-color: #fff;
  z-index: 999;
  padding: 20px;
  box-sizing: border-box;
  // 动画
  animation: fadeRightToLeft 0.5s linear;

  .title {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }

  .input-box {
    padding: 10px;
    box-sizing: border-box;

    .input {
      width: 100%;
      border: none;
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
      background-color: #f0f0f0;
    }
  }
}

.box-box {
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  height: calc(100vh - 100px);

  .box {
    margin-bottom: 10px;

    .box-card {
      padding: 10px;
      box-sizing: border-box;
      border-radius: 5px;
      margin: 20px 0 20px 0;
      cursor: pointer;

      .box-title {
        font-size: 14px;
        font-weight: bold;
      }

      .box-code {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .box-card-no-selected {
    border: 2px solid #f0f0f0;
  }

  .box-card-selected {
    border: 2px solid #000000;
  }

  .box-card:hover {
    transform: scale(1.02);
  }

  .box-card:active {
    transform: scale(1);
  }

}

.back {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  // 动画
  animation: fadeIn 0.5s linear;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeRightToLeft {
  0% {
    right: -450px;
  }

  100% {
    right: 0;
  }
}

.back-closing {
  opacity: 0;
  animation: fadeOut 0.2s linear;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.card-closing {
  right: -450px;
  animation: fadeLeftToRight 0.3s linear;
}

@keyframes fadeLeftToRight {
  0% {
    right: 0;
  }

  100% {
    right: -450px;
  }
}

</style>